<style type="text/css">
   /* Make room for the mini-form */
   html body { margin-top: 60px; }
   
   #grpsrminiform * {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    color: #999999;
    display: inline;
    font: 12px Verdana,Arial,Tahoma;
    margin: 0;
    padding: 0;
    text-align: left;
    text-decoration: none;
   }

   #grpsrminiform p {
      margin: 5px;
      display: block;
   }
   
   #grpsrminiform p a{
      color: #CE6C1C;
      cursor: pointer;
   }
   
    
   /* Style the mini-form div */
   #grpsrminiform {
      border-top: 3px solid #ce6c1c;
      border-bottom: 3px solid #ce6c1c;
      background: #0b1933;
      position: fixed;
      top:0; left:0;
      width: 100%;
      height: 30px;
      z-index: 100000;
   }
</style>
<div id="grpsrminiform">
    <p>
        <a status="start"><?php echo __('Start Tagging') ?></a>
        <a style="display:none;" status="stop"><?php echo __('Stop Tagging') ?></a>
        | <a status="save"><?php echo __('Save') ?></a>
    </p>
</div>

<script type="text/javascript">
    var xpaths; // save xpath in this variable
    var element; //save element tagged in this variable
    var markers = {};
    
    function isNotAllowedTag(tag, xpath)
    {
        var isTagForm = ($(tag).parents().filter('#tagform').length > 0 || $(tag).attr('id') == 'tagform');
        var isMiniForm = ($(tag).parents().filter('#grpsrminiform').length > 0 || $(tag).attr('id') == 'grpsrminiform');
        //console.log(isTagForm);
        if(isTagForm || isMiniForm || xpath == '/html' || xpath == '/html/body')
          return true;
        else
          return false;
    }
    
    function startTagging()
    {

        $('*').click(function(e){

           var tmpXpaths = getElementXPath(this);
           
           if (isNotAllowedTag(this, tmpXpaths['xpath']))
           {
              $('*').removeClass('hovercss');
              return false;
           }
           else
           {
                xpaths = tmpXpaths;
                $('*').removeClass('hovercss');
                $('*').removeClass('clickcss');
                $(this).addClass('clickcss'); // add css to indicate click
                //if note is enter and not click set
                saveTag();
                
                element = this; //set global variable to pass element this
                noteTag(this);
                
                if(markers[xpaths['xpath']])
                {
                    $('#label').val(markers[xpaths['xpath']].label);
                    $('#note').val(markers[xpaths['xpath']].note);
                }
              
              return false;
           }
        });
        
        
        //hover mouse indication
        $("*").mouseenter(function(e){
             var tempXpaths = getElementXPath(this);
                         
            if (!isNotAllowedTag(this, tempXpaths['xpath']))
            {
              $(this).addClass('hovercss');
            }
            e.preventDefault();
            return false;
        });
        //remove mouse indication on mouse out
        $("*").mouseout(function(){
            $(this).removeClass('hovercss');
        });

    }
    
    function stopTagging()
    {
         $('*').unbind('click');
         $("*").unbind('mouseenter');
         bindEvent();
    }
    
    function saveTag()
    {
        if($.trim($("#note").val()) !='' && $.trim($("#label").val()) !='')
        {
            var tavalue = {label:$("#label").val(), note: $("#note").val()};
            //$.data(document.body, xpaths['xpath'], tavalue);
            markers[xpaths['xpath']] = tavalue;
            $(element).removeClass('clickcss').addClass('tagsaved');
            $('#note').val('');
            $('#label').val('');
        } 
    }
    
    
    function bindEvent()
    {
          $("#settag").click(function(){

            if($.trim($("#note").val()) !='' && $.trim($("#label").val()) !='')
            {
                saveTag();
                $('#tagform').hide();
                return false;
            }
            else
            {   console.log(xpaths['xpath']);
                delete markers[xpaths['xpath']];
                $(element).removeClass('clickcss').removeClass('tagsaved');
                $('#tagform').hide();
                return false;
            }
         });

        //cancel tag
        $("#canceltag").click(function(){
            $(element).removeClass('clickcss');
            $('#tagform').hide();
            return false;
        })
        
         //cancel tag
        $("#grpsrminiform a").click(function(){
          
            if($(this).attr('status') == 'start')
            {
                startTagging();
                $(this).hide();
                $('a[status=stop]').show();
            }
            else if($(this).attr('status') == 'stop')
            {
                stopTagging();
                $(this).hide();
                $('a[status=start]').show();
            }
            else
            {
                var url = '/service/project/createfromurl';
                $('<div id="ss"></div>').dialog({
                        width:550,
                        modal:true,
                        resizable:false,
                        position:'center',
                        title:'<?php echo __('Create Project') ?>',
                        close:function(){$('#ss').remove();},
                        open:function(){
                                $(this).html('<?php echo __('Loading...'); ?>');
                                $(this).load(url,'',function(){});
                        }
                });
            }
            
        });
    }

    $(document).ready(function(){
        $('a[target]').removeAttr('target');
        $('img[_src]').each(function(){
            $(this).removeAttr('_src');
        });

        bindEvent();
    });

    /**
     * Gets an XPath for an element which describes its hierarchical location.
     */
    getElementXPath = function(element){
        //  console.log(element.id);
        if (element && element.id) {
            var id = '//*[@id="' + element.id + '"]';
            var path = getElementTreeXPath(element);
            return {
                'id': id,
                'xpath': path
            };
        }
        else {
            var path = getElementTreeXPath(element);
            return {
                'xpath': path
            };
        }
    };

    getElementTreeXPath = function(element){
        var paths = [];

        // Use nodeName (instead of localName) so namespace prefix is included (if any).
        for (; element && element.nodeType == 1; element = element.parentNode) {
            var index = 0;
            for (var sibling = element.previousSibling; sibling; sibling = sibling.previousSibling) {
                // Ignore document type declaration.
                if (sibling.nodeType == Node.DOCUMENT_TYPE_NODE)
                    continue;

                if (sibling.nodeName == element.nodeName)
                    ++index;
            }

            var tagName = element.nodeName.toLowerCase();
            var pathIndex = (index ? "[" + (index + 1) + "]" : "");
            paths.splice(0, 0, tagName + pathIndex);
        }

        return paths.length ? "/" + paths.join("/") : null;
    };



function noteTag (elem)
{
   	if(elem)
	{
		noteOffset = $(elem).offset();
        form_left  = parseInt(noteOffset.left) - 4;
		form_top   = parseInt(noteOffset.top) + parseInt($(elem).css('height'));
               
		$('#tagform').css({ left: form_left + 'px', top: form_top + 'px', width: '300px' });
		$('#tagform').show();
		$('#tagform').css("z-index", 1000);
	}
}
</script>
